<template>
  <div>
    <el-table v-if="type === 'primary'" :data="tableData" style="width: 100%">
      <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
      >
      </el-table-column>
    </el-table>
    <el-table v-else-if="type === 'self'" :data="tableData" style="width: 100%">
      <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'MyButton',
  props: {
    componentType: {
      type: String,
      default: "table"
    },
    type: {
      type: String,
      default: "primary"
    },
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    functionId: {
      type: String,
      default: ""
    },
    formId: {
      type: String,
      default: ""
    }
  },
  watch: {
    type: {
      handler(val) {
        if (val) {
          if(this.type === 'primary'){
            this.columns = []
            this.tableData = []
            this.loadConfig()
          }
        }
      },
      immediate: true
    }
  },
  methods:{
    loadConfig(){
      let functionId = this.functionId
      let formId = this.formId
      this.tableData =  [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
      this.columns = [
        {
          prop: "date",
          label: "日期",
          width: "150"
        },
        {
          prop: "name",
          label: "姓名",
          width: "150"
        },
        {
          prop: "address",
          label: "地址",
          width: "150"
        },
      ]
    }
  }
};
</script>
